/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div :style="{position: 'absolute', left: Data.busleft, top: Data.bustop}" class="northbusmap">
    <div :class="Data.id >= 9 && Data.id <= 12 ? '' : 'hide'">
      <svg
        version="1.1"
        id="图层_1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px"
        y="0px"
         viewBox="0 0 24 91"
        style="enable-background:new 0 0 24 91;"
        xml:space="preserve"
        :width="IconWdith"
        :height="IconLengh"
      >
        <g id="图层_2" data-name="图层 2">
          <g id="图层_1-2" data-name="图层 1">
            <g id="有轨电车-北"  v-if="Data.controltype === 5">
              <path
                class="cls-1"
                d="M0,4V87a4,4,0,0,0,4,4H20a4,4,0,0,0,4-4V4a4,4,0,0,0-4-4H4A4,4,0,0,0,0,4Z"
              ></path>
              <g class="cls-2">
                <rect class="cls-3" x="21.1" y="84.5" width="0.5" height="3"></rect>
                <path
                  class="cls-3"
                  d="M21.6,8.4v5.7h-.5V8.4Zm0,7.6v5.7h-.5V16Zm0,7.6v5.7h-.5V23.6Zm0,7.6v5.7h-.5V31.2Zm0,7.6v5.7h-.5V38.8Zm0,7.7v5.7h-.5V46.5Zm0,7.6v5.7h-.5V54.1Zm0,7.6v5.7h-.5V61.7Zm0,7.6V75h-.5V69.3Zm0,7.6v5.7h-.5V76.9Z"
                ></path>
                <rect class="cls-3" x="21.1" y="3.5" width="0.5" height="3"></rect>
              </g>
              <g class="cls-2">
                <rect class="cls-3" x="2.3" y="84.5" width="0.5" height="3"></rect>
                <path
                  class="cls-3"
                  d="M2.8,8.4v5.7H2.3V8.4Zm0,7.6v5.7H2.3V16Zm0,7.6v5.7H2.3V23.6Zm0,7.6v5.7H2.3V31.2Zm0,7.6v5.7H2.3V38.8Zm0,7.7v5.7H2.3V46.5Zm0,7.6v5.7H2.3V54.1Zm0,7.6v5.7H2.3V61.7Zm0,7.6V75H2.3V69.3Zm0,7.6v5.7H2.3V76.9Z"
                ></path>
                <rect class="cls-3" x="2.3" y="3.5" width="0.5" height="3"></rect>
              </g>
              <path
                class="cls-3"
                d="M10.1,41.9h0a4.87,4.87,0,0,0,4.8-4.8V34.6l.4.6c0,.1.1.1.2.1s.1-.1.2-.1l.9-2.4a.37.37,0,0,0-.1-.3.37.37,0,0,0-.3.1l-.8,2-.5-.8V17.4a.47.47,0,0,0-.5-.5h-6a.47.47,0,0,0-.5.5v23C7.8,41.3,9.3,41.9,10.1,41.9Zm1-22.4a.43.43,0,0,1-.4-.4V17.9a.43.43,0,0,1,.4-.4h1.7a.43.43,0,0,1,.4.4v1.2a.43.43,0,0,1-.4.4Zm0,2.3a.43.43,0,0,1-.4-.4V20.2a.43.43,0,0,1,.4-.4h1.7a.43.43,0,0,1,.4.4v1.2a.43.43,0,0,1-.4.4Zm0,2.6a.43.43,0,0,1-.4-.4V22.8a.43.43,0,0,1,.4-.4h1.7a.43.43,0,0,1,.4.4V24a.43.43,0,0,1-.4.4Zm0,2.3a.43.43,0,0,1-.4-.4V25.1a.43.43,0,0,1,.4-.4h1.7a.43.43,0,0,1,.4.4v1.2a.43.43,0,0,1-.4.4Zm0,2.4a.43.43,0,0,1-.4-.4V27.5a.43.43,0,0,1,.4-.4h1.7a.43.43,0,0,1,.4.4v1.2a.43.43,0,0,1-.4.4Zm0,2.5a.43.43,0,0,1-.4-.4V30a.43.43,0,0,1,.4-.4h1.7a.43.43,0,0,1,.4.4v1.2a.43.43,0,0,1-.4.4Zm0,2.4a.43.43,0,0,1-.4-.4V32.4a.43.43,0,0,1,.4-.4h1.7a.43.43,0,0,1,.4.4v1.2a.43.43,0,0,1-.4.4Zm0,2.3a.43.43,0,0,1-.4-.4V34.7a.43.43,0,0,1,.4-.4h1.7a.43.43,0,0,1,.4.4V36a.43.43,0,0,1-.4.4H11.1ZM9.2,39.8a.65.65,0,0,1-.6-.6V38a.65.65,0,0,1,.6-.6h3.3a.65.65,0,0,1,.6.6,1.79,1.79,0,0,1-1.8,1.8Z"
              ></path>
              <path class="cls-3" d="M7.1,16.3V42.6a.4.4,0,0,1-.8,0V16.3a.4.4,0,0,1,.8,0Z"></path>
            </g>
            <g id="公交车-北"  v-if="Data.controltype === 3">
              <path
                class="cls-1"
                d="M0,4V87a4,4,0,0,0,4,4H20a4,4,0,0,0,4-4V4a4,4,0,0,0-4-4H4A4,4,0,0,0,0,4Z"
              ></path>
              <g class="cls-2">
                <rect class="cls-3" x="21.2" y="84.5" width="0.5" height="3"></rect>
                <path
                  class="cls-3"
                  d="M21.7,8.4v5.7h-.5V8.4Zm0,7.6v5.7h-.5V16Zm0,7.6v5.7h-.5V23.6Zm0,7.6v5.7h-.5V31.2Zm0,7.6v5.7h-.5V38.8Zm0,7.7v5.7h-.5V46.5Zm0,7.6v5.7h-.5V54.1Zm0,7.6v5.7h-.5V61.7Zm0,7.6V75h-.5V69.3Zm0,7.6v5.7h-.5V76.9Z"
                ></path>
                <rect class="cls-3" x="21.2" y="3.5" width="0.5" height="3"></rect>
              </g>
              <g class="cls-2">
                <rect class="cls-3" x="2.4" y="84.5" width="0.5" height="3"></rect>
                <path
                  class="cls-3"
                  d="M2.9,8.4v5.7H2.4V8.4Zm0,7.6v5.7H2.4V16Zm0,7.6v5.7H2.4V23.6Zm0,7.6v5.7H2.4V31.2Zm0,7.6v5.7H2.4V38.8Zm0,7.7v5.7H2.4V46.5Zm0,7.6v5.7H2.4V54.1Zm0,7.6v5.7H2.4V61.7Zm0,7.6V75H2.4V69.3Zm0,7.6v5.7H2.4V76.9Z"
                ></path>
                <rect class="cls-3" x="2.4" y="3.5" width="0.5" height="3"></rect>
              </g>
              <path
                class="cls-3"
                d="M8.4,35.5a1.4,1.4,0,1,0,1.4,1.4A1.51,1.51,0,0,0,8.4,35.5Zm0,.4a1,1,0,0,1,1,1,.94.94,0,0,1-1,1,1,1,0,1,1,0-2Z"
              ></path>
              <path
                class="cls-3"
                d="M8.4,22a1.4,1.4,0,1,0,1.4,1.4A1.43,1.43,0,0,0,8.4,22Zm0,.4a1,1,0,1,1-1,1A1,1,0,0,1,8.4,22.4Z"
              ></path>
              <path
                class="cls-3"
                d="M13.1,16.1H9.4c-.2.9-.7,3-1,4.1v1.2a1.88,1.88,0,0,1,1.8,1.9,2,2,0,0,1-1.8,1.9v9.9A1.88,1.88,0,0,1,10.2,37a2,2,0,0,1-1.8,1.9v3.6a.47.47,0,0,0,.5.5h2.8l.3-.6h2.4A1.37,1.37,0,0,0,15.8,41V19A2.74,2.74,0,0,0,13.1,16.1Zm1.1,23.3a.47.47,0,0,1,.5.5v.8a.47.47,0,0,1-.5.5H9.7a.47.47,0,0,1-.5-.5V40a.47.47,0,0,1,.5-.5l4.5-.1Zm.2-5.6a.43.43,0,0,1,.4.4v3.9a.43.43,0,0,1-.4.4H12.7a.43.43,0,0,1-.4-.4V34.2a.43.43,0,0,1,.4-.4Zm0-5.3a.43.43,0,0,1,.4.4v3.9a.43.43,0,0,1-.4.4H12.7a.43.43,0,0,1-.4-.4V28.9a.43.43,0,0,1,.4-.4Zm0-5.4a.43.43,0,0,1,.4.4v3.9a.43.43,0,0,1-.4.4H12.7a.43.43,0,0,1-.4-.4V23.5a.43.43,0,0,1,.4-.4Zm0-5.3a.43.43,0,0,1,.4.4v3.9a.43.43,0,0,1-.4.4H12.7a.43.43,0,0,1-.4-.4V18.2a.43.43,0,0,1,.4-.4Z"
              ></path>
            </g>
            <g id="BRT-北"  v-if="Data.controltype === 4">
              <path
                class="cls-1"
                d="M0,4V87a4,4,0,0,0,4,4H20a4,4,0,0,0,4-4V4a4,4,0,0,0-4-4H4A4,4,0,0,0,0,4Z"
              ></path>
              <g class="cls-2">
                <rect class="cls-3" x="21.1" y="84.5" width="0.5" height="3"></rect>
                <path
                  class="cls-3"
                  d="M21.6,8.4v5.7h-.5V8.4Zm0,7.6v5.7h-.5V16Zm0,7.6v5.7h-.5V23.6Zm0,7.6v5.7h-.5V31.2Zm0,7.6v5.7h-.5V38.8Zm0,7.7v5.7h-.5V46.5Zm0,7.6v5.7h-.5V54.1Zm0,7.6v5.7h-.5V61.7Zm0,7.6V75h-.5V69.3Zm0,7.6v5.7h-.5V76.9Z"
                ></path>
                <rect class="cls-3" x="21.1" y="3.5" width="0.5" height="3"></rect>
              </g>
              <g class="cls-2">
                <rect class="cls-3" x="2.3" y="84.5" width="0.5" height="3"></rect>
                <path
                  class="cls-3"
                  d="M2.8,8.4v5.7H2.3V8.4Zm0,7.6v5.7H2.3V16Zm0,7.6v5.7H2.3V23.6Zm0,7.6v5.7H2.3V31.2Zm0,7.6v5.7H2.3V38.8Zm0,7.7v5.7H2.3V46.5Zm0,7.6v5.7H2.3V54.1Zm0,7.6v5.7H2.3V61.7Zm0,7.6V75H2.3V69.3Zm0,7.6v5.7H2.3V76.9Z"
                ></path>
                <rect class="cls-3" x="2.3" y="3.5" width="0.5" height="3"></rect>
              </g>
              <path
                class="cls-3"
                d="M8.3,35.5a1.4,1.4,0,1,0,1.4,1.4A1.43,1.43,0,0,0,8.3,35.5Zm0,.4a1,1,0,0,1,1,1,.94.94,0,0,1-1,1,1,1,0,0,1,0-2Z"
              ></path>
              <path
                class="cls-3"
                d="M8.3,22a1.4,1.4,0,1,0,1.4,1.4A1.37,1.37,0,0,0,8.3,22Zm0,.4a1,1,0,1,1-1,1A1,1,0,0,1,8.3,22.4Z"
              ></path>
              <path
                class="cls-3"
                d="M13.1,16.1H9.4c-.2.9-.7,3-1,4.1v1.2a1.88,1.88,0,0,1,1.8,1.9,2,2,0,0,1-1.8,1.9v9.9A1.88,1.88,0,0,1,10.2,37a2,2,0,0,1-1.8,1.9v3.6a.47.47,0,0,0,.5.5h2.7l.3-.6h2.4A1.37,1.37,0,0,0,15.7,41V19A2.72,2.72,0,0,0,13.1,16.1Zm1,23.3a.47.47,0,0,1,.5.5v.8a.47.47,0,0,1-.5.5H9.6a.47.47,0,0,1-.5-.5V40a.47.47,0,0,1,.5-.5l4.5-.1Zm.2-5.6a.43.43,0,0,1,.4.4v3.9a.43.43,0,0,1-.4.4H12.6a.43.43,0,0,1-.4-.4V34.2a.43.43,0,0,1,.4-.4Zm0-5.3a.43.43,0,0,1,.4.4v3.9a.43.43,0,0,1-.4.4H12.6a.43.43,0,0,1-.4-.4V28.9a.43.43,0,0,1,.4-.4Zm0-5.4a.43.43,0,0,1,.4.4v3.9a.43.43,0,0,1-.4.4H12.6a.43.43,0,0,1-.4-.4V23.5a.43.43,0,0,1,.4-.4Zm0-5.3a.43.43,0,0,1,.4.4v3.9a.43.43,0,0,1-.4.4H12.6a.43.43,0,0,1-.4-.4V18.2a.43.43,0,0,1,.4-.4Z"
              ></path>
              <path
                class="cls-3"
                d="M5.9,12.5V8.2H7.5a2,2,0,0,1,.8.1,1,1,0,0,1,.5.4,1.42,1.42,0,0,1,.2.6.75.75,0,0,1-.1.5,2.18,2.18,0,0,1-.5.4.92.92,0,0,1,.6.4,1.45,1.45,0,0,1,.2.7,1.27,1.27,0,0,1-.1.6,1.38,1.38,0,0,1-.3.4c-.1.1-.4.1-.5.1s-.4.1-.7.1Zm.6-.5H8c.1,0,.2-.1.3-.1s.1-.2.2-.3.1-.2.1-.4,0-.3-.1-.4l-.3-.3c-.1,0-.4-.1-.6-.1h-1L6.5,12Zm0-2H7.9c.1,0,.3-.1.3-.2s.1-.2.1-.4A.6.6,0,0,0,8.2,9c-.1-.1-.2-.2-.3-.2s-.2-.1-.5-.1H6.5Z"
              ></path>
              <path
                class="cls-3"
                d="M10,12.5V8.2h1.9a2.22,2.22,0,0,1,.9.1,1,1,0,0,1,.5.4,1.42,1.42,0,0,1,.2.6,1.14,1.14,0,0,1-.3.8,1.88,1.88,0,0,1-.9.4c.2.1.3.1.3.2a3.17,3.17,0,0,1,.5.6l.7,1.2h-.7l-.6-.9a5.92,5.92,0,0,0-.4-.6l-.3-.3a.37.37,0,0,0-.3-.1h-1v1.9Zm.5-2.4h1.2c.3,0,.5,0,.6-.1s.3-.1.3-.3.1-.2.1-.4a.76.76,0,0,0-.2-.5,1.17,1.17,0,0,0-.7-.2H10.4l.1,1.5Z"
              ></path>
              <path class="cls-3" d="M15.3,12.5V8.7H13.9V8.2h3.4v.5H15.9v3.8Z"></path>
            </g>
          </g>
        </g>
      </svg>
    </div>
  </div>
</template>
<script>
export default {
  name: 'northBusSvg',
  props: {
    IconLengh: {
      // 相位图标长度
      type: String,
      default: '91px'
    },
    IconWdith: {
      // 相位图标宽度
      type: String,
      default: '24px'
    },
    Data: {
      type: Object
    }
  },
  methods: {},
  mounted () {}
}
</script>
<style scoped>
.invisible {
  visibility: hidden;
}
.hide {
  display: none;
}
.cls-1 {
  fill: #5f5f5f;
  opacity: 0.8;
  isolation: isolate;
}
.cls-2 {
  opacity: 0.3;
}
.cls-3 {
  fill: #fff;
}
</style>
